<template>
	<div style="width: 100%;" class="right productionBasismanagSoldout">
				<!-- <div class="where">当前位置：分销后台><router-link to="/zhibotongji">直播统计</router-link>>{{$route.query.name}}主播详情</div>
                <div style="height: 16px; width: 100%; background: #EFEFEF;"></div> -->
                <div class="t_table_box">
					<div >
						<div class="t_util_box">
							<div class="t_util_left">
								<div>时间周期：</div>
								<el-date-picker
								:clearable="false"
								@change="changetime"
								v-model="timeloop"
								value-format="yyyy-MM-dd HH:mm:ss"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
								</el-date-picker>
								<div style="margin-left: 30px;">直播时段：</div>
								<el-select @change="choosetimeline" v-model="value" clearable placeholder="请选择">
									<el-option
									v-for="(item,index) in timeoptions"
									:key="index"
									:label="item.start_at+'-'+item.end_at"
									:value="item.start_at+'-'+item.end_at">
									</el-option>
								</el-select>
								
							</div>
							<!-- <router-link to="/zhuboguanli">
								<el-button type="danger">主播管理</el-button>
							</router-link> -->
						</div>
						<el-table
							:header-cell-style="{ 
							background:'#F4F4F4',
							color:'#7D8087'}"
							:data="tableData"
							stripe
							style="width: 100%">
							<el-table-column
								prop="live_title"
								label="直播间&店铺">
								</el-table-column>
								<el-table-column
								prop="live_source"
								label="来源">
								</el-table-column>
								<el-table-column
								:key="Math.random()"
								v-if="sd==''"
								prop="formatted_time"
								label="总时长">
									
								</el-table-column>
								
								
								<el-table-column
								:key="Math.random()"
								prop="sales"
								sortable
								label="总销量">
								</el-table-column>
								<el-table-column
								sortable
								prop="sales_hourly"
								label="下单/小时">
								</el-table-column>
								<el-table-column
								:key="Math.random()"
								prop="shipments"
								label="总发货数">
								</el-table-column>
								<el-table-column
								sortable
								prop="created_at"
								label="开播时间">
								</el-table-column>
								<el-table-column
								sortable
								prop="end_at"
								label="下播时间">
								</el-table-column>
								
								
								
								
								
								
						</el-table>
						
					</div>
                </div>
				
			</div>
	
</template>

<script>
	import axios from 'axios'
	// import top from '@/components/top.vue'
	// import left from '@/components/left.vue'
	// import foot from '@/components/foot.vue'
	


	export default {
		components: {
		
		},
		name: 'productionBasismanagDj',
		data() {
			return{
				tableData: [],
				timeloop:[],
                sd:'',
				url: '',
				activeName:'first',
				testarr:'',
				shop_id:'',
				timeoptions:[],
			}
		},
		props:['starttime','endtime','streamer_id','streamer_sd','shift_start_time','shift_end_time'],
		created() {
			this.shop_id = JSON.parse(localStorage.getItem('SHOP')).shop_id;
			this.url = window.location.origin
			// const end = new Date();
            // const start = new Date();
            // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			// this.timeloop[0]=this.getCurrentTime(start)
			// this.timeloop[1]=this.getCurrentTime(end)

			this.timeloop[0]=this.starttime
			this.timeloop[1]=this.endtime
			this.sd = this.streamer_sd
			console.log(this.timeloop)
			
			//获取所有主播
			this.getlist()
			this.getpeizhi()
		},

		methods: {
			//中国标准时间转化
			getCurrentTime (date) {
				// let date = new Date()
				var year = date.getFullYear() //返回指定日期的年份
				var month = this.repair(date.getMonth() + 1);//月
				var day = this.repair(date.getDate());//日
				var hour = this.repair(date.getHours());//时
				var minute = this.repair(date.getMinutes());//分
				var second = this.repair(date.getSeconds());//秒
				
				//当前时间 
				var curTime = year + "-" + month + "-" + day
						+ " " + hour + ":" + minute + ":" + second;
				return curTime;
			},
			//补0
			repair(i){
				if (i >= 0 && i <= 9) {
					return "0" + i;
				} else {
					return i;
				}
			},
			// //获取所有主播
			// async getzbdet (){
			// 	await axios.get('/api/live-stream/streamer/data/list',{
			// 		params:{
			// 			streamer_id:this.streamer_id,
			// 			start_time:this.timeloop[0],
			// 			end_time:this.timeloop[1],
						
			// 		}
			// 	 }).then((response)=>{
			// 		this.tableData=[]
			// 		console.log('获取所有标题')
			// 		console.log(response.data.data)
			// 		this.testarr = response.data.data
			// 	})

			// 	for  ( let  i in this.testarr ) {
			// 		//获取列表
					 
			// 		setTimeout( ()=>{
			// 			// console.log(i)
			// 			this.getlist(this.testarr[i])
			// 		}
         	// 		, i * 1000)
			// 	}
			// },
			//获取列表
			 getlist(record_id){ 
				 axios.get('/api/lives/statisticsx',{
					params:{
						start_time:this.timeloop[0],
						end_time:this.timeloop[1],
						tab:1,
						shift_start_time:this.shift_start_time,
						shift_end_time:this.shift_end_time,
						streamer_id:this.streamer_id
					}
				}).then((response)=>{
					// console.log(response.data.data)
					this.tableData = response.data.data
					
					
				})
			},
			//选择时段
            changesd(val){
                if(val==this.sd){
                    this.sd=''
                }else{
                    this.sd=val
                }
                
            },
			//选择时间
			changetime(val){
				console.log(val)
				if(val==null){
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					this.timeloop=[]
					console.log(this.timeloop)
					this.timeloop[0]=this.getCurrentTime(start)
					this.timeloop[1]=this.getCurrentTime(end)
				}
				//获取所有主播
				this.getzbdet()
			},
			//秒转时分秒
			getTime(value) {
				// var value='3720'
				let theTime = parseInt(value);// 秒
				let theTime1 = 0;// 分
				let theTime2 = 0;// 小时
				
				if(theTime > 59) {
				theTime1 = parseInt(theTime/60);
				theTime = parseInt(theTime%60);
				
				if(theTime1 > 59) {
				theTime2 = parseInt(theTime1/60);
				theTime1 = parseInt(theTime1%60);
				}
				}
				// let result = ''+parseInt(theTime)+'秒';
				let result = [0,0,parseInt(theTime)];
				if(theTime1 > 0) {
				// result = ''+parseInt(theTime1)+'分'+result;
				result = [0,parseInt(theTime1),parseInt(theTime)];
				}
				if(theTime2 > 0) {
				// result = ''+parseInt(theTime2)+'小时'+result;
				result = [parseInt(theTime2),parseInt(theTime1),parseInt(theTime)];
				}
				// console.log(result)
				// 	return [h, m, s]
				return result;
			},
			choosetab(val){
				console.log(val)
			},
			//下载
			downloadTask(streamer_id){
				var streamer_id = streamer_id
				if(this.sd==''){
					var type = 0
				}else if(this.sd=='1'){
					var type = 1
				}else if(this.sd=='2'){
					var type = 2
				}
				
				var start_time = this.timeloop[0]
				var end_time = this.timeloop[1]

				// console.log(this.url+'/api/live-stream/order/export?streamer_id='+streamer_id+'&type='+type+'&start_time='+start_time+'&end_time='+end_time)

				// var a = document.createElement("a");
				// a.setAttribute("href", this.url+'/api/live-stream/order/export?streamer_id='+streamer_id+'&type='+type+'&start_time='+start_time+'&end_time='+end_time);
				// a.click();

				axios.get('/api/live-stream/order/export', {
					params:{
						streamer_id:streamer_id,
						type:type,
						start_time:start_time,
						end_time:end_time,
					}
				}).then(response => {
					if (response.data.msg.code == 0) {
						let routeData = this.$router.resolve({
							path: '/order_export4',query:{
								type:'zhibo'
							}
						});
						window.open(routeData.href, '_blank');
					} else {
						this.$message.error(response.data.msg.info);
						
					}

				})
			},
			// 选择直播时段
			choosetimeline(val){
				console.log(val)
				if(val){
					this.shift_start_time = val.split("-")[0]
					this.shift_end_time = val.split("-")[1]
				}else{
					this.shift_start_time = ''
					this.shift_end_time = ''
				}

				this.getlist()
				

			},
			getpeizhi:function(){
				axios.get('/api/live-stream/shift/list').then((response)=>{
					if (response.data.msg.code == 0) {
						this.peizhi = response.data.data
						this.timeoptions = []

						for(var x=0;x<this.peizhi[0].list.length;x++){
							this.timeoptions.push(this.peizhi[0].list[x])
						}
						for(var y=0;y<this.peizhi[1].list.length;y++){
							this.timeoptions.push(this.peizhi[1].list[y])
						}

						console.log('getpeizhi')
						console.log(this.timeoptions)

					} else {
						this.$message.error(response.data.msg.info);
					}
				})
			},
			
		}
	}
</script>

<style scoped>
  
    .t_util_box{
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        color: #666666;
		/* margin-top: 30px; */
    }
    .t_util_left{
        display: flex;
        align-items: center;
    }
    .t_time_duan{
        display: flex;
    }
    .t_sd_btn{
        border: 1px solid #CCCCCC;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 13px;
        margin-right: 15px;
        cursor:pointer;
    }
    .t_sd_btn_lei{
        background-color: #FF5050;
        color: white;
    }
	.t_table_box{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* margin-top: 50px; */
    }
</style>
<style lang="scss" scoped>
	.productionBasismanagSoldout {
	

		.see {
			color: #409EFF;
			margin: 20px 0;
			cursor: pointer;
		}

		.cpflex {
			display: flex;
			flex-wrap: wrap;

			.el-form-item {
				margin-bottom: 0px;
			}
		}

		.kucun {
			.el-input {
				width: 200px;
			}

			.list {
				display: flex;
				text-align: center;
				border-bottom: 1px #EAEAEA solid;

				.bor1 {
					border-right: 1px #EAEAEA solid;

					i {
						color: #409EFF;
						font-size: 14px;
						margin-left: 10px;
						cursor: pointer;
					}
				}

				.th {
					background: #F9F9F9;
					line-height: 45px;
					flex: 1;
					font-size: 14px;
					box-sizing: border-box;
				}

				.td {
					line-height: 45px;
					font-size: 14px;
					flex: 1;
					box-sizing: border-box;
					color: #666;
				}

				.td2 {
					flex: 1.5
				}
			}
		}

		

				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.bsm {
					padding: 20px 20px 0 20px;

					.el-input {
						width: 220px;
					}
				}

				.row2 {
					color: #FFF;
					margin-top: 20px;

					a {
						color: #FFF;
					}
				}

				.con {
					margin: 20px;
					border: 1px #EAEAEA solid;

					.list {
						display: flex;
						text-align: center;
						border-bottom: 1px #EAEAEA solid;

						.bor1 {
							border-right: 1px #EAEAEA solid;

							i {
								color: #409EFF;
								font-size: 14px;
								margin-left: 10px;
								cursor: pointer;
							}
						}

						.th {
							background: #F9F9F9;
							line-height: 45px;
							flex: 1;
							font-size: 14px;
							box-sizing: border-box;
						}

						.td {
							line-height: 45px;
							font-size: 14px;
							flex: 1;
							box-sizing: border-box;
							color: #666;
						}

						.td2 {
							flex: 1.5
						}
					}
				}

				.el-pagination {
					text-align: right;
					margin-right: 20px;
					padding-bottom: 50px;
				}
	

	}
</style>
